<template>
  <el-dialog
          :model-value="dialogVisible"
          :title="dialogStatus == 'create' ? '新建一级分类' : '编辑一级分类'"
          :before-close="handleCancleDialog"
          width="35%"
  >
    <el-form :model="formData" ref="dialogFormRef" :rules="rules" label-width="80px">
      <el-form-item label="媒资分类" prop="mediatype">
        <el-select placeholder="请选择媒资分类" clearable v-model="formData.mediatype">
          <el-option
                  v-for="mediatype in mediaTypeList"
                  :key="mediatype.mediatype"
                  :value="mediatype.mediatype"
                  :label="mediatype.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input placeholder="请输入一级分类名称" v-model="formData.name" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input placeholder="请输入一级分类排序" v-model.number="formData.sort" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div align="center">
        <el-button type="default" size="mini" @click="handleCancleDialog">取消</el-button>
        <el-button type="primary" size="mini" @click="dialogStatus == 'create' ? handleCreateCategory() : handleUpdateCategory()">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import {toRef, ref, reactive} from 'vue'
  import {createCategory, updateCategory} from "@/api/media/constant";
  import {ElMessage} from 'element-plus'

  export default {
    name: "CreateCategory",
    props: {
      mediaTypeList: {
        type: Array,
        default() {
          return []
        }
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      dialogStatus: {
        type: String,
        default: 'create'
      },
      dialogFormData: {
        type: Object,
        default() {
          return {
            catid: undefined,
            name: '',
            mediatype: '',
            sort: 1
          }
        }
      }
    },
    emits: ['handleCancleDialog', 'reloadData'],
    setup(props, context) {
      const formData = toRef(props, 'dialogFormData')
      const dialogFormRef = ref(null)
      const rules = reactive({
        mediatype: [{required: true, message: '请选择媒资类型', trigger: 'change'}],
        name: [{required: true, message: '请输入一级分类名称', trigger: 'blur'}],
        sort: [{type: 'number', message: '排序只能输入数字', trigger: 'blur'}]
      })

      /** 关闭弹框 **/
      const handleCancleDialog = () => {
        context.emit('handleCancleDialog')
      }
      /** 创建一级分类 **/
      const handleCreateCategory = () => {
        dialogFormRef.value.validate(valid => {
          if (valid) {
            createCategory(formData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                context.emit('reloadData')
                handleCancleDialog()
              } else {
                ElMessage({type: 'error', message: response.msg, duration: 2000})
              }
            })
          }
        })
      }
      /** 更新一级分类 **/
      const handleUpdateCategory = () => {
        dialogFormRef.value.validate(valid => {
          if (valid) {
            updateCategory(formData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                context.emit('reloadData')
                handleCancleDialog()
              } else {
                ElMessage({type: 'error', message: response.msg, duration: 2000})
              }
            })
          }
        })
      }

      return {
        handleCancleDialog,
        formData,
        dialogFormRef,
        rules,
        handleCreateCategory,
        handleUpdateCategory
      }
    }
  }
</script>

<style scoped>

</style>
